<template>
  <div class="my">
    <div class="topbg">
      <div class="sett">
        <img src="../assets/setting@2x.png" alt />
        <img src="../assets/comment@2x.png" alt />
      </div>
      <div class="con clearfix">
        <div class="left fl">
          <div class="clearfix">
            <div class="imgtou fl">
              <img src="../assets/my_03.png" alt />
            </div>
            <div class="ren fl">
              <p>裴彩云</p>
              <p>电话：15037106666</p>
            </div>
          </div>
        </div>
        <div class="right fr">我的课程表</div>
      </div>
      <div class="btn_type">
        <div class="left_btn">
          <span>余额：23065.00</span>
          <span>充值</span>
        </div>
        <div class="right_btn">
          <span>积分：1917</span>
          <span>详情</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="tab_type clearfix">
        <div class="one fl">
          <p>
            <img src="../assets/read-fill@2x.png" alt />
          </p>
          <p>我的课程</p>
        </div>
        <div class="two fl">
          <p>
            <img src="../assets/layout-fill@2x.png" alt />
          </p>
          <p>我的班级</p>
        </div>
        <div class="three fl">
          <p>
            <img src="../assets/project-fill@2x.png" alt />
          </p>
          <p>我的预报名</p>
        </div>
      </div>
      <div class="myorder">
        <div class="order clearfix">
          <span class="fl">我的订单</span>
          <span class="fr">全部订单></span>
        </div>
        <div class="orderbtn clearfix">
          <div class="one fl">
            <p>
              <img src="../assets/pay@2x.png" alt />
            </p>
            <p>待付款</p>
          </div>
          <div class="two fl">
            <p>
              <img src="../assets/send@2x.png" alt />
            </p>
            <p>待发货</p>
          </div>
          <div class="three fl">
            <p>
              <img src="../assets/deliver@2x.png" alt />
            </p>
            <p>待收货</p>
          </div>
          <div class="four fl">
            <p>
              <img src="../assets/service@2x.png" alt />
            </p>
            <p>售后管理</p>
          </div>
        </div>
      </div>
      <div class="list">
          <ul>
              <li class="clearfix">
                  <span class="fl"><img src="../assets/yue.png" alt=""></span>
                  <span class="fl">余额提现</span>
                  <span class="fr">
                      <img src="../assets/right@2x.png" alt="">
                  </span>
              </li>
               <li class="clearfix">
                   <span class="fl"><img src="../assets/dingdan.png" alt="" ></span>
                  <span class="fl">资金明细</span>
                 <span class="fr">
                     <img src="../assets/right@2x.png" alt="" >
                 </span>
              </li> 
              <li class="clearfix">
                  <span class="fl"> <img src="../assets/anquan.png" alt=""></span>
                  <span class="fl">安全设置</span>
                  
                  <span class="fr">
                      <img src="../assets/right@2x.png" alt="">
                  </span>
              </li>
               <li class="clearfix">
                  
                  <span class="fl"><img src="../assets/bangzhu.png" alt=""></span>
                  <span class="fl">帮助中心</span>
                 
                  <span class="fr">
                       <img src="../assets/right@2x.png" alt="">
                  </span>
              </li>
               <li class="clearfix">
                  <span class="fl"><img src="../assets/kefu.png" alt=""></span>
                  <span class="fl">联系客服</span>
                  <span class="fr"><img src="../assets/right@2x.png" alt="" ></span>
              </li>
          </ul>
      </div>
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
import footbar from '../components/footbar';
export default {
  name: "my",
  data (){
      return {

      }
  },
  components:{
      footbar
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
.my {
  width: 100%;
  // height: 13.34rem;
  background-color: #f8f8f8;
  position: relative;
  font-size: 0;
  .topbg {
    width: 100%;
    height: 3.8rem;
    background: -webkit-linear-gradient(
      left top,
      #fe6b70,
      #f62e35
    ); /* Safari 5.1 - 6.0 */
    padding-top: 0.65rem;
    box-sizing: border-box;
    overflow: hidden;
    .sett {
      text-align: right;
      img {
        width: 0.37rem;
        &:nth-child(2) {
          margin-right: 0.2rem;
        }
        &:nth-child(1) {
          margin-right: 0.55rem;
        }
      }
    }
    .con {
      width: 100%;
      .left {
        width: 65%;
        .imgtou {
          width: 1.4rem;
          height: 1.4rem;
          overflow: hidden;
          padding-left: 0.5rem;
          box-sizing: border-box;
          padding-top: 0.4rem;
          img {
            width: 100%;
          }
        }
        .ren {
          font-family: @family;
          font-size: 0.22rem;
          color: #fff;
          box-sizing: border-box;
          padding-top: 0.5rem;
          margin-left: 0.15rem;
          p:nth-child(1) {
            font-size: 0.3rem;
          }
        }
      }
      .right {
        width: 1.5rem;
        height: 0.5rem;
        line-height: 0.5rem;
        color: #fff;
        background-color: rgb(237, 150, 26);
        font-size: 0.24rem;
        border-radius: 0.26rem 0 0 0.26rem;
        text-align: center;
        margin-top: 0.6rem;
      }
    }
    .btn_type {
      width: 100%;
      text-align: center;
      font-size: 0;
      margin-top: 0.65rem;
      div {
        display: inline-block;
        width: 40%;
        height: 0.7rem;
        line-height: 0.7rem;
        font-family: @family;
        font-size: 0.24rem;
        color: #fff;
        border-radius: 0.15rem 0.15rem 0 0;
        &:nth-child(1) {
          background-color: #3b3835;
          margin-right: 0.1rem;
          span {
            display: inline-block;
            &:nth-child(2) {
              width: 0.72rem;
              height: 0.36rem;
              line-height: 0.36rem;
              background-color: #f62e35;
              border-radius: 0.36rem;
              margin-left: 0.15rem;
              font-size: 0.2rem;
            }
          }
        }
        &:nth-child(2) {
          background-color: #d4d2d2;
          color: #313131;
          span {
            display: inline-block;
            &:nth-child(2) {
              color: #313131;
              padding: 0 0.1rem;
              box-sizing: border-box;
              height: 0.36rem;
              line-height: 0.36rem;
              border-radius: 0.36rem;
              margin-left: 0.15rem;
              border: 1px solid #313131;
            }
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    .tab_type {
      width: 100%;
      padding: 0.3rem 0;
      text-align: center;
      font-size: 0.22rem;
      font-family: @family;
      color: rgb(49, 49, 49);
      background-color: #fff;
      div {
        text-align: center;
        width: 33%;
      }

      p {
        width: 100%;
        margin: 0 auto;

        &:nth-child(1) {
          width: 0.56rem;
          height: 0.56rem;
          img {
            width: 100%;
          }
        }
        &:nth-child(2) {
          margin-top: 0.1rem;
        }
      }
    }
    .myorder {
      width: 100%;
      margin-top: 0.2rem;
      background-color: #fff;
      padding: 0.3rem 0.2rem;
      box-sizing: border-box;
      .order {
        font-size: 0.26rem;
        font-family: @family;
        color: rgb(49, 49, 49);
        span {
          &:nth-child(1) {
            font-weight: bold;
          }
          &:nth-child(2) {
            font-size: 0.22rem;
            color: rgb(151, 151, 151);
          }
        }
      }
      .orderbtn {
        width: 100%;
        text-align: center;
        font-size: 0.22rem;
        font-family: @family;
        color: rgb(49, 49, 49);
        background-color: #fff;
        margin-top:0.5rem;
        div {
          text-align: center;
          width: 25%;
        }

        p {
          width: 100%;
          margin: 0 auto;

          &:nth-child(1) {
            width: 0.56rem;
            height: 0.56rem;
            img {
              width: 100%;
            }
          }
          &:nth-child(2) {
            margin-top: 0.1rem;
          }
        }
      }
     
    }
     .list{
          width: 100%;
          background-color: #fff;
          margin-top:0.2rem;
          padding:0 0.2rem;
          box-sizing: border-box;
          margin-bottom: 1rem;
          li{
              height: 1rem;
              line-height: 1rem;
              border-bottom: 1px solid #f8f8f8;
              font-size: 0.26rem;
              font-family: @family;
              color:rgb(49,35,35);
             span{
                 display: inline-block;
                 &:nth-child(1){
                     width: 0.4rem;
                     margin-right:0.15rem;
                     img{
                         width: 100%;
                         vertical-align: -4px;
                     }
                 }
                 &:nth-child(3){
                     width: 0.15rem;
                     height: 0.25rem;
                     img{
                         width: 100%;
                     } 
                 }
             }
          }
      }
  }
}
</style>
<style lang="less">
  .my{
    .mint-tabbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), color-stop(50%, #d9d9d9), color-stop(50%, transparent));
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    background-color: #fafafa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: center;
}
  }
</style>